<template>
    <el-scrollbar>
        <div class="px-[10px] pt-[15px] pb-[20px]">
            <!-- {{ currentEl  }} -->
            <el-form
                v-if="currentEl"
                class="flex flex-col items-stretch gap-[16px]"
                :model="elFormData"
                label-position="left"
            >
                <el-form-item
                    v-if="!isLine"
                    label="节点名称"
                    prop="nodeName"
                >
                    <el-input
                        v-model="elFormData.nodeName"
                        placeholder="请输入节点名称"
                        @input="handleNodeNameInput"
                    />
                </el-form-item>
                <el-form-item
                    :label="isLine ? '连线颜色' : '背景色'"
                >
                    <div class="text-right w-full">
                        <el-color-picker
                            v-model="elFormData.bgColor"
                            :predefine="colorList"
                            @change="changeBgColor"
                        />
                    </div>
                </el-form-item>
                <el-form-item
                    v-if="!isLine"
                    label="内容颜色"
                >
                    <div class="text-right w-full">
                        <el-color-picker
                            v-model="
                                elFormData.contentColor
                            "
                            :predefine="colorList"
                            @change="changeContentColor"
                        />
                    </div>
                </el-form-item>
                <el-form-item
                    v-if="!isLine"
                    label="备注"
                    prop="remark"
                >
                    <el-input
                        type="textarea"
                        v-model="elFormData.remark"
                        placeholder="请输入"
                        :autosize="{ minRows: 3 }"
                    />
                </el-form-item>
                <el-form-item
                    v-if="isLine"
                    label="连线条件"
                    prop="label"
                >
                    <el-input
                        v-model="elFormData.label"
                        placeholder="请输入"
                        @input="handleLineLabelInput"
                    />
                </el-form-item>
            </el-form>
            <div
                v-else
                class="text-center text-[16px] text-[#191919] leading-[1.2] font-500"
            >
                你没有选中任何节点或连线
            </div>
        </div>
    </el-scrollbar>
</template>
<script setup>
import mittBus from '@/utils/mittbus';
import { debounce } from '@/utils/index';
const props = defineProps({
    currentEl: {
        type: Object,
        required: false,
        default: () => {},
    },
});
const isLine = computed(() => {
    return props.currentEl?.type === 'line';
});
const elFormData = computed(() => {
    return props.currentEl;
});
const handleNodeNameInput = (val) => {
    debounce(() => updateNodeNameChange(val), 600, false)();
};
const handleLineLabelInput = (val) => {
    debounce(
        () => updateLineLabelChange(val),
        600,
        false,
    )();
};
const updateNodeNameChange = (val) => {
    mittBus.emit('update-node-name', val);
};
const updateLineLabelChange = (val) => {
    mittBus.emit('update-line-label', val);
};
const changeBgColor = (val) => {
    mittBus.emit('update-el-color', {
        type: 'backgroundColor',
        value: val,
    });
};
const changeContentColor = (val) => {
    mittBus.emit('update-el-color', {
        type: 'color',
        value: val,
    });
};
const colorList = [
    '#FFFFFF',
    '#191919',
    '#F44336',
    '#E91E63',
    '#9C27B0',
    '#673AB7',
    '#2196F3',
    '#03A9F4',
    '#00BCD4',
    '#009688',
    '#4CAF50',
    '#FFEB3B',
    '#FFC107',
    '#FF5722',
    '#9E9E9E',
    '#607D8B',
];
</script>
<style scoped></style>
